<script lang="ts" setup>
	import { ref,reactive,onMounted,getCurrentInstance } from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		onShow,
		onHide,
		onLoad,
		onBackPress,
		onReachBottom	
	} from '@dcloudio/uni-app'
	
	import workerTabbar from "@/components/worker-tabbar/worker-tabbar.vue"
	import postJobCard from "@/components/post-job-card/post-job-card.vue"
	const router = useRouter()
	const {proxy} = getCurrentInstance()
	onBackPress(() => {
		router.pushTab({
			name: 'index',
			params: {}
		})
	})
	
	const state = reactive({
		status:'',
		currentObj:'',
		total:0,
		pageNo:1,
		pageSize:10,
		list:[],
		
	})
	
	const clickTabs = (e) => {
		console.log(e,'clickTabs');
		// tabName.value = e.name
		
		state.status = e.val
		state.pageNo = 1;
		state.list = []
		meiyeRecruitJob3List()
	}
	let tabsList = ref([{
		name: '全部',
		val:''
	}, {
		name: '招聘中',
		val:1
	}, {
		name: '暂停中',
		val:0
	}])
	
	const toAddJob = ()=>{
		router.push({
			name: 'addJob',
			params: {}
		})
	}
	
	
	
	//获取职位管理列表
	const meiyeRecruitJob3List = () => {
		let params = {
			status:state.status,
			pageNo:state.pageNo,
			pageSize:state.pageSize,
		}
		proxy.$req('GET', proxy.$api.meiyeRecruitJob3List, params).then((res) => {
			if(res.code === 200){
				state.total = res.result.total
				state.list = state.list.concat(res.result.records)
			}
		})
	}
	onMounted(() => {
		meiyeRecruitJob3List()
	})
	onReachBottom(() => {
		if(state.total>state.list.length){
			state.pageNo++
			meiyeRecruitJob3List()
		}
	})
</script>
<template>
	<view class="cTabs">
		<u-tabs :list="tabsList" :activeStyle="{
			width:'200rpx',
			height:'80rpx',
            color: '#303133',
			textAlign:'center',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :inactiveStyle="{
			width:'200rpx',
			height:'80rpx',
			textAlign:'center',
            color: '#606266',
            transform: 'scale(1)'
        }" lineWidth="100rpx" lineColor="#333" @click="clickTabs"></u-tabs>
	</view>
	<view class="main-box">
		<view class="card-box">
			<post-job-card :list="state.list"></post-job-card>
		</view>
		<view class="addJob">
			<view class="addJobBtn" @click="toAddJob">发布职位</view>
		</view>
	</view>
	


	<view class="">
		<worker-tabbar name="postJob"></worker-tabbar>
	</view>
</template>
<style lang="scss" scoped>
	page {
		background: #f6f6f6;
		height: 100%;
	}
	.main-box{
		display:flex;
		flex-direction: column;
	}
	.cTabs {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		background:#fff;
	}
	.card-box{
		background:#f1f3f4;
		padding:24rpx;
		margin-bottom:214rpx;
	}
	
	.addJob{
		width:100%;
		
		position:fixed;
		bottom:120rpx;
		left:0;
		right:0;
		.addJobBtn{
			margin:0 16rpx;
			background:#CB645E;
			color:#fff;
			height:100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 10rpx;
		}
		
		
	}
</style>